<!-- 评论列表组件 -->
<template>
  <!-- 显示第一条用户评论价 -->
  <van-cell class="comment_item" :border="false">
    <!-- 用户信息 -->
    <div class="user_info">
      <!-- 用户头像 -->
      <img width="35" height="35" :src="reply?.avatar">
      <!-- 用户名称 -->
      <span class="nickname">{{ reply?.nickname }}</span>
      <!-- 用户评星 -->
      <van-rate v-model="commentStar" readonly />
    </div>

    <!-- 商品信息与评论时间 -->
    <p class="comment_time">
      {{ reply?.add_time + ' - ' + reply?.sku }}
    </p>

    <!-- 评论内容 -->
    <p class="comment_content">
      {{ reply?.comment }}
    </p>

    <!-- 评论图片 -->
    <ul class="comment_images">
      <li v-for="(item, index) of pics" :key="index">
        <img :src="item">
      </li>
    </ul>
  </van-cell>
</template>

<script setup>
// -------------------------------- 导入模块 --------------------------------
// 导入 vue3 的 API
import { toRefs, computed } from 'vue'

// 导入 vant 组件，按需引入
import {
  Cell as VanCell,
  Rate as VanRate
} from 'vant'

// -------------------------------- 声明数据 --------------------------------
// 接收父组件传递的数据
const props = defineProps({
  reply: {
    type: Object,
    required: true
  }
})

const { reply } = toRefs(props) // 获取商品 id
const commentStar = computed(() => Number(reply.value?.star) || 0) // 用户评星
const pics = computed(() => reply.value?.pics) // 用户评星
</script>

<style lang="scss" scoped>
// 评论列表
.comment_item {
  padding: 0 15px 20px;

  // 用户信息
  .user_info {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 7px 0;

    // 头像
    img {
      border-radius: 50%;
    }

    // 昵称
    .nickname {
      padding: 0 10px 0 6px;
    }
  }

  // 商品信息与评论时间
  .comment_time {
    padding: 5px 0;
    font-size: 12px;
    color: #82848f;
  }

  // 评论内容
  .comment_content {
    margin-bottom: 10px;
    font-size: 13px;
  }

  // 评论图片
  .comment_images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;

    li {
      width: 25%;
      margin-bottom: 10px;
      text-align: center;

      img {
        width: 78px;
        height: 78px;
      }
    }
  }
}
</style>
